<template>
	<div>
		<el-container style="position: absolute;left: 0;bottom: 0;right: 0;top: 0;overflow: hidden;">
			<el-header class="d-flex align-items-center" style="background: #545c64;">
				<a class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
				<el-menu
					:default-active="navBar.active"
					class="el-menu-demo"
					mode="horizontal"
					@select="handleSelect"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-menu-item :index="index|numToString" 
					v-for="(item, index) in navBar.list" :key="index"
					>{{item.name}}</el-menu-item>

					<el-submenu index="100">
						<template slot="title">
							<el-avatar size="small" :src="user.avatar ? user.avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
							{{user.username}}
						</template>
						<el-menu-item index="100-1">修改</el-menu-item>
						<el-menu-item index="100-2">退出</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-header>
			<!-- 侧边导航 -->
			<el-container style="height: 100%;">
				<el-aside width="200px">
					<el-menu :default-active="sliderMenuActive"
					@select="slideSelect"
					style="height: 100%;">
						
						<el-menu-item :index="index|numToString" 
						v-for="(item, index) in slideMenus" :key="index"
						>
							<i :class="item.icon"></i>
							<span slot="title">{{item.name}}</span>
						</el-menu-item>
						
					</el-menu>
				</el-aside>
				<!-- 主内容区 -->
				<el-main class="bg-light" style="padding-bottom: 60px;position: relative;"
				v-loading="loading">
					<!-- 面包屑导航 -->
					<div class="border-bottom mb-3 bg-white"
					style="margin: -20px;padding: 20px;"
					v-if="bread.length > 0">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item :to="{ path: item.path }"
							v-for="(item, index) in bread" :key="index">{{item.title}}</el-breadcrumb-item>
						</el-breadcrumb>
					</div>
					<!-- 主内容 -->
					<router-view></router-view>
					
					<!-- 回到顶部 -->
					<el-backtop target=".el-main" :bottom="100">
						<div class="upButton">
					      UP
						</div>
					</el-backtop>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
import common from "@/common/mixins/common.js"
import {mapState} from "vuex"

export default {
	mixins:[common],
	
	provide() {
		return {
			layout: this
		}
	},
	
	data() {
		return {
			navBarIndex: '0',
			bread:[],
			loading: false,
		};
	},
	
	created() {
		this.getRouterBread()
		//初始化选中菜单
		this.__initNavBar()
	},
	
	watch: {
		'$route'(to, from) {
			//本地存储
			localStorage.setItem('navActive', JSON.stringify({
				top: this.navBar.active,
				left: this.sliderMenuActive
			}))
			this.getRouterBread()
		}
	},
	
	computed: {
		...mapState({
			user: state => state.user.user,
			navBar: state => state.menu.navBar
		}),
		sliderMenuActive: {
			get() {
				let item = this.navBar.list[this.navBar.active]
				return item ? item.subActive : '0'
			},
			set(val) {
				let item = this.navBar.list[this.navBar.active]
				if (item) {
					item.subActive = val
				}
			}
		},
		slideMenus() {
			let item = this.navBar.list[this.navBar.active]
			return item ? item.submenu : []
		}
	},
	
	methods: {
		//显示loading
		showLoading() {
			this.loading = true
		},
		//隐藏loading
		hideLoading() {
			this.loading = false
		},
		__initNavBar() {
			let r = localStorage.getItem('navActive')
			if (r) {
				r = JSON.parse(r)
				this.navBar.active = r.top
				this.sliderMenuActive  = r.left
			}
		},
		//点击顶部导航
		handleSelect(key, keyPath) {
			if(key === '100-1') {
				return console.log('修改密码')
			}
			if (key === '100-2') {
				return this.logout()
			}
			this.navBar.active = key
			//默认跳转到当前激活的哪一个
			this.sliderMenuActive = '0'
			if (this.slideMenus.length > 0) {
				this.$router.push({
					name: this.slideMenus[this.sliderMenuActive].pathname
				})
			}
		},
		slideSelect(key, keyPath) {
			this.sliderMenuActive = key
			//跳转指定页面
			this.$router.push({name: this.slideMenus[key].pathname})
		},
		//获取面包屑导航
		getRouterBread() {
			let b = this.$route.matched.filter(v => v.name)
			let arr = []
			b.forEach((v,k) => {
				if(v.name === 'index' || v.name === 'layout') return
				arr.push({name: v.name, path:v.path, title:v.meta.title})
			})
			if (arr.length > 0) {
				arr.unshift({name:'index', path:'/index', title:'后台首页'})
			}
			this.bread = arr
		},
		
		//退出登录
		logout() {
			this.axios.post('/admin/logout',{}, {
				token: true,
				loading: true
			}).then(res => {
				this.$store.commit('logout')
				this.$message('退出成功')
				//返回到登录页
				this.$router.push({name: 'login'})
			}).catch(err => {
				this.$store.commit('logout')
				this.$router.push({name: 'login'})
			})
		}
		
	},
	
};
</script>

<style>
.upButton {
	height: 100%;
	width: 100%;
	background-color: #f2f5f6;
	box-shadow: 0 0 6px rgba(0,0,0, .12);
	text-align: center;
	line-height: 40px;
	color: #1989fa;
}
</style>
